<template>
  <div class="app">
    <van-nav-bar
      :title="title"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
    />
    <!-- 缓存路由组件的数据   -->
    <!-- <keep-alive exclude="NewsInfo,PhotoInfo,GoodsInfo">
      <router-view />
    </keep-alive> -->

    <!-- <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" /> -->

    <keep-alive v-if="$route.meta.keepAlive">
      <router-view />
    </keep-alive>
    <router-view v-else />

    <van-tabbar
      v-model="active"
      v-if="$route.meta.isShow"
    >
      <van-tabbar-item
        icon="home-o"
        to="/home"
      />
      <van-tabbar-item
        icon="friends-o"
        to="/friends"
      />
      <van-tabbar-item
        icon="cart-o"
        to="/cart"
        :badge="$store.getters.getAllCount"
      />
      <van-tabbar-item
        icon="search"
        to="search"
      />
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data: () => ({
    active: 0,
    title: '首页'
  }),
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    }
  },
  watch: {
    '$route.meta'(val) {
      this.title = val.title
    }
  }
}
</script>
<style lang="less" scoped>
.app {
  padding-top: 46px;
  padding-bottom: 50px;
}
.van-nav-bar--fixed,
.van-tabbar--fixed {
  position: fixed;
}
</style>
